<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>CycloSafe - 骑行安全码表</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&amp;family=Noto+Sans+SC:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<style>
      .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;display: inline-block;
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale;font-feature-settings: 'liga';
      }
    </style>
<script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#3B82F6", // Blue 500
              "background-light": "#F3F4F6", // Gray 100
              "background-dark": "#111827",  // Gray 900
              "card-light": "#FFFFFF",
              "card-dark": "#1F2937", // Gray 800
              "text-light-primary": "#1F2937", // Gray 800
              "text-dark-primary": "#F9FAFB", // Gray 50
              "text-light-secondary": "#6B7280", // Gray 500
              "text-dark-secondary": "#9CA3AF", // Gray 400
              "accent-green": "#10B981", // Emerald 500
            },
            fontFamily: {
              display: ["Poppins", "Noto Sans SC", "sans-serif"],
              sans: ["Poppins", "Noto Sans SC", "sans-serif"],
            },
            borderRadius: {
              DEFAULT: "1rem", // 16px
              lg: "1.5rem", // 24px
              xl: "2rem", // 32px
            },
          },
        },
      };
    </script>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-background-light dark:bg-background-dark font-sans flex flex-col h-screen">
<main class="flex-grow p-6 space-y-6 overflow-y-auto">
<header class="text-center mt-4 mb-8">
<h1 class="text-4xl font-bold text-primary font-display">CycloSafe</h1>
<p class="text-text-light-secondary dark:text-dark-secondary mt-1">骑行安全，尽在掌握</p>
</header>
<section>
<a class="block bg-primary text-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300" href="#">
<div class="flex items-center justify-center space-x-4">
<span class="material-icons text-4xl">directions_bike</span>
<span class="text-2xl font-semibold">开始骑行</span>
</div>
</a>
</section>
<section class="grid grid-cols-2 gap-4">
<a class="bg-card-light dark:bg-card-dark p-4 rounded-lg shadow-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-300 flex flex-col items-center text-center" href="#">
<span class="material-icons text-primary text-3xl mb-2">history</span>
<h3 class="font-semibold text-text-light-primary dark:text-dark-primary">历史记录</h3>
<p class="text-xs text-text-light-secondary dark:text-dark-secondary">查看骑行数据</p>
</a>
<a class="bg-card-light dark:bg-card-dark p-4 rounded-lg shadow-md hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-300 flex flex-col items-center text-center" href="#">
<span class="material-icons text-primary text-3xl mb-2">settings</span>
<h3 class="font-semibold text-text-light-primary dark:text-dark-primary">设置</h3>
<p class="text-xs text-text-light-secondary dark:text-dark-secondary">个性化配置</p>
</a>
</section>
<section class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-text-light-primary dark:text-dark-primary mb-4">我的统计</h2>
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<p class="text-2xl font-bold text-primary">0</p>
<p class="text-sm text-text-light-secondary dark:text-dark-secondary">总次数</p>
</div>
<div>
<p class="text-2xl font-bold text-primary">0.0</p>
<p class="text-sm text-text-light-secondary dark:text-dark-secondary">总里程(km)</p>
</div>
<div>
<p class="text-2xl font-bold text-primary">0:00:00</p>
<p class="text-sm text-text-light-secondary dark:text-dark-secondary">总时长</p>
</div>
</div>
</section>
</main>
<footer class="bg-card-light dark:bg-card-dark shadow-t sticky bottom-0 w-full">
<nav class="flex justify-around items-center h-16">
<a class="flex flex-col items-center text-primary" href="#">
<span class="material-icons">home</span>
<span class="text-xs font-medium">首页</span>
</a>
<a class="flex flex-col items-center text-text-light-secondary dark:text-dark-secondary hover:text-primary dark:hover:text-primary transition-colors duration-300" href="#">
<span class="material-icons">bar_chart</span>
<span class="text-xs">记录</span>
</a>
<a class="flex flex-col items-center text-text-light-secondary dark:text-dark-secondary hover:text-primary dark:hover:text-primary transition-colors duration-300" href="#">
<span class="material-icons">settings</span>
<span class="text-xs">设置</span>
</a>
</nav>
</footer>

</body></html>